<template>

	<view>

		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view class="gui-flex" @tap="goto_city">
			<text class="gui-grids-icon gui-icons gui-h6"
				style="text-align: left;width: 10%;margin-left: 2%;">&#xe63f;</text>
			<text class="gui-h6" style="margin-top: 2.5%;margin-left: -4%;">{{default_city}}</text>
		</view>

		<view class="gui-margin-top">
			<gui-swiper :swiperItems="swiperItems" :width="750" :height="330"></gui-swiper>
		</view>

		<view class="gui-margin-top gui-bg-gray gui-padding">
			<gui-speaker :items="speakerMsgs" @change="chang1">
				<text slot="icon" class="gui-block-text gui-icons demo-icon gui-color-blue">&#xe656;</text>
			</gui-speaker>
		</view>


		<view class="gui-margin-top gui-padding gui-flex" style="margin-left: 40rpx;">

			<gui-row :customClasses="['gui-margin-top']" mainAxisAlignment="flex-end">
				<view class="gui-grids-items" style="width: 210rpx;" v-for="(item,index) in teacher_nav_list"
					:key="index" @tap="nav_tap(item.tag)">
					<span class="gui-grids-icon gui-icons" v-html="item.icon"></span>
					<text class="gui-grids-text">{{item.name}}</text>
				</view>


			</gui-row>




		</view>


		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top gui-padding">
			<text class="gui-primary-color gui-h6 gui-flex1">附近商家</text>
			<text class="gui-icons gui-text-small gui-color-gray" @tap="huan_yi_pi()">换一批 &#xe61a;</text>
		</view>

		<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top gui-padding">
			<input type="text" class="gui-form-input" :value="value2" disabled placeholder="请选择区域" @tap="open2" />
			<text class="gui-icons gui-form-icon gui-color-gray gui-text-right">&#xe603;</text>
		</view>

		<view class="gui-card-view gui-margin-top gui-box-shadow" v-if="nav_index==1" style="min-height: 700rpx;">

			<gui-empty v-if="shop_list==''">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="gui-empty-img" :src="empty_img">
					</image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
					style="color:#9DABFF;">暂无数据</text>
			</gui-empty>

			<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap" v-for="(item,index) in shop_list"
				:key="index">
				<image :src="item.logo" style="width: 150rpx;height: 150rpx;" @tap="goto_shop_details(item.id)"></image>
				<view class="gui-card-desc">
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-card-name">{{item.name}}</text>
						<!-- <text class="gui-text-small gui-color-blue">补充信息</text> -->
					</view>

					<text class="gui-card-text gui-block-text" style="margin-top:10rpx;"
						@tap="daohang(item.longitude,item.latitude)">{{item.address}}</text>
					<text class="gui-card-text gui-block-text"
						@tap="callMobile(item.phone_number)">{{item.phone_number}}</text>
				</view>

				<view class="demo gui-button gui-bg-blue gui-noborder" hover-class="gui-tap" v-if="item.is_relation==0"
					style="width: 100rpx;margin-top: 50rpx;" @tap="bind_shop(item.id)">
					<text class="gui-color-white gui-button-text" style="line-height: 28rpx;">绑定</text>
				</view>

				<view class="demo gui-button gui-bg-red gui-noborder" hover-class="gui-tap" v-if="item.is_relation==1"
					style="width: 100rpx;margin-top: 50rpx;" @tap="unbind_shop(item.id)">
					<text class="gui-color-white gui-button-text" style="line-height: 28rpx;">解绑</text>
				</view>
			</view>

		</view>



		<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="default2"
			v-if="default2 != null"></gui-area-picker>

		<view style="height: 100rpx;"></view>

		<gui-footer-player-custom :navCurrents="0"></gui-footer-player-custom>


		<gui-iphone-bottom></gui-iphone-bottom>



	</view>



</template>

<script>
	var img =
		"https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzNnx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				empty_img: this.empty_img,
				default2: ['湖北省', '武汉市', '武昌区'],
				value2: '',
				nav_index: 1,
				speakerMsgs: [],
				teacher_nav_list: [{
						"icon": '&#xe6fe;',
						"name": "球童"
					},
					{
						"icon": '&#xe6fe;',
						"name": "助教"
					},
					{
						"icon": '&#xe6fe;',
						"name": "教练"
					}
				],
				shop_list: "",
				products: [],
				swiperItems: [],
				swiperItems2: [],
				nav_list: [{
					id: 0,
					name: '球伴'
				}, {
					id: 1,
					name: '球室'
				}],
				// navCurrent: 0,
				default_city: '武汉市'
			}
		},
		onLoad: function(query) {

			let _this = this;

			_this.$globalMethod();

			if (typeof query.city != 'undefined') {
				_this.default_city = query.city;

			} else {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.loadCity(res.longitude, res.latitude);
					}
				});
			}

			_this.userIndex();

			_this.shop_index_list(0);



		},
		methods: {
			findItemById(id) {
				console.log(182, this.shop_list);
				return this.shop_list.findIndex(obj => obj.id === id);
			},
			daohang(longitude, latitude) {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = latitude;
						const longitude = longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});

			},

			bind_shop(id) {

				let _this = this;
				this.graceJS.post(
					this.serverUrl + '/api.teacher/bind_shop', {
						shop_id: id
					}, {

					}, {
						token: _this.token
					},
					(res) => {
						// console.log(res);
						if (res.code == 0) {
							// var index = _this.findItemById(id);
							// console.log(_this.shop_list[0].is_relation);
							// console.log(index);
							// if (index != -1) {
							// 	_this.shop_list[index].is_relation = 1;
							// }

							_this.shop_index_list(0);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					},
					(e) => {
						console.log(e);
					}
				);
			},
			unbind_shop(id) {
				let _this = this;
				this.graceJS.post(
					this.serverUrl + '/api.teacher/unbind_shop', {
						shop_id: id
					}, {

					}, {
						token: _this.token
					},
					(res) => {
						// console.log(res);

						if (res.code == 0) {
							// console.log(_this.shop_list[0].is_relation);
							// var index = _this.findItemById(id);
							// console.log(index);
							// if (index != -1) {
							// 	_this.shop_list[index].is_relation = 0;
							// }

							_this.shop_index_list(0);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					},
					(e) => {
						console.log(e);
					}
				);
			},
			huan_yi_pi() {
				this.shop_index_list(1);
			},
			shop_index_list(is_huan_yi_pi) {
				let _this = this;
				this.graceJS.post(
					this.serverUrl + '/api.shop/shop_list', {
						province: _this.default2[0],
						city: _this.default2[1],
						area: _this.default2[2],
						huan_yi_pi: is_huan_yi_pi
					}, {

					}, {
						token: _this.token
					},
					(res) => {
						console.log(res);
						if (res.code == 0) {
							_this.shop_list = res.data.shop_list;
						}
					},
					(e) => {
						console.log(e);
					}
				);
			},
			nav_tap(tag) {
				if (tag == 'scan') {
					// 只允许通过相机扫码
					let _this = this;
					uni.scanCode({
						scanType: ['qrCode'],
						success: function(res) {
							_this.graceJS.post(_this.serverUrl + '/api.orders/teacher_scan', {
								code: res.result
							}, 'json', {
								token: _this.token
							}, (res) => {
								if(res.code==0){
									uni.navigateTo({
										url:'/pages/order/player_list',
										success:function(){
											uni.showToast({
												title:res.msg,
												icon:'success'
											})
										}
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							}, (e) => {
								
							})
						},
						fail: function(e) {
							uni.showToast({
								title: e.errorMsg,
								icon: 'error'
							})
						}
					});
				}

				if (tag == 'zhujiao_test') {




					uni.navigateTo({
						url: '/pages/assistant/apply/zhujiao'
					})
				}

				if (tag == 'coach_test') {
					uni.navigateTo({
						url: '/pages/assistant/apply/jiaolian'
					})
				}
			},
			chang1: function(e) {
				// console.log(e);
			},
			findItemById(id) {
				return this.products.findIndex(obj => obj.id === id);
			},
			collect_teacher(id) {
				let _this = this;
				this.graceJS.post(
					this.serverUrl + '/api.member/add_collect', {
						id: id
					}, {

					}, {
						token: _this.token
					},
					(res) => {
						console.log(res);
						if (res.code == 0) {
							var index = _this.findItemById(id);
							_this.products[index].is_follow = res.data.is_follow;
						}
					},
					(e) => {
						console.log(e);
					}
				);
			},
			swiperchange: function(e) {
				console.log(e);
			},

			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			},
			navchange: function(index) {
				console.log(index);
				this.nav_index = index;
			},
			gotoInfo: function(idx, item) {
				console.log('商品索引 : ' + idx);
				console.log('商品索引 : ' + item);
				uni.navigateTo({
					url: "/pages/coach/details?id=" + idx
				})
			},
			goto_city: function() {
				uni.navigateTo({
					url: "/pages/index/city"
				})
			},
			goto_shop_details: function(id) {
				uni.navigateTo({
					url: "/pages/shop/shop_details?id=" + id
				})
			},
			userIndex() {

				let _this = this;
				// console.log(_this.default_city);
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.index/teacher_index', //仅为示例，并非真实接口地址。
					data: {
						"city": _this.default_city
					},
					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;
						console.log(return_data);
						if (return_data.code == 0) {
							_this.teacher_nav_list = return_data.data.tab_arr;
							_this.speakerMsgs = return_data.data.box_msg;
							// _this.shop_list = return_data.data.shop_list;
							_this.swiperItems = return_data.data.banner_list;
						}
					}
				});
			},
			// 经纬度转具体城市
			// 1）需要用到高德地图的逆地理编码
			// 2）需要当前地理位置的经纬度
			// 3）小程序的key值
			loadCity(longitude, latitude) {
				let _this = this;
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo', //仅为示例，并非真实接口地址。
					data: {
						key: _this.gaodeKey,
						location: longitude + ',' + latitude,
						extensions: 'all'
					},

					success: (res) => {
						// console.log(res.data);
						var return_data = res.data;
						if (return_data.status == 1) {
							if (res.data.regeocode.addressComponent.city == '') {
								_this.default2[0] = return_data.regeocode.addressComponent.province;
								_this.default2[1] = return_data.regeocode.addressComponent.province;
								_this.default2[2] = return_data.regeocode.addressComponent.district;
								_this.default_city = res.data.regeocode.addressComponent.province;
							} else {
								_this.default2[0] = return_data.regeocode.addressComponent.province;
								_this.default2[1] = return_data.regeocode.addressComponent.city;
								_this.default2[2] = return_data.regeocode.addressComponent.district;
								_this.default_city = res.data.regeocode.addressComponent.city;
							}

							_this.value2 = _this.default2[0] + ',' + _this.default2[1] + ',' + _this.default2[
								2];


						} else {
							uni.showToast({
								title: return_data.msg,
								icon: 'error'
							});
						}
					}
				});

			},

			goto_city() {
				uni.navigateTo({
					url: "/pages/index/city?default_city=" + this.default_city
				})
			},
			open2: function() {
				this.$refs.graceAddressPicker2.open();
			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				this.province = e.names[0];
				this.city = e.names[1];
				this.area = e.names[2];
			}
		}
	}
</script>

<style>
	.demo {
		width: 210rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		margin: 10rpx;
	}

	.demo-auto-width {
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		margin: 10rpx;
	}

	.gui-text-small {
		font-size: 20rpx;
	}

	.gui-footer-icon-buttons {
		width: 130rpx;
		height: 80rpx;
		padding: 10rpx;
		flex: 1;
		position: relative;
		margin: 0;
		background-color: #F8F8F8;
	}

	.gui-footer-buttons-ab {
		position: absolute;
		z-index: 101;
		left: 325rpx;
		top: 0rpx;
		width: 110rpx;
		height: 150rpx;
	}

	.gui-footer-buttons-ab-icon {
		width: 110rpx;
		height: 110rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 68rpx;
		background-color: #F7F8FA;
		border-radius: 100rpx;
	}

	/* 皮肤内定义 */
	/* 默认导航颜色 */
	.gui-nav-bottom-color {
		color: #B6C3D2;
	}

	/* 选中导航颜色 */
	.gui-nav-bottom-active-color {
		color: #2B2E3D;
	}

	/* 页面定义 */
	/* 重新规划按钮宽度 */
	.gui-footer-icon-buttons {
		width: 120rpx;
		height: 80rpx;
		position: relative;
	}

	/* 定位按钮样式 */
	.gui-footer-buttons-ab {
		position: absolute;
		z-index: 101;
		left: 0;
		top: -50rpx;
		width: 100rpx;
		height: 150rpx;
	}

	.gui-footer-buttons-ab-icon {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 60rpx;
		background-color: #F7F8FA;
		border-radius: 100rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		background-color: #FFFFFF;
		padding: 25rpx;
	}

	.gui-card-body {
		padding-bottom: 25rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888888;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.gui-footer-icon-buttons {
		width: 130rpx;
		height: 80rpx;
		padding: 10rpx;
		flex: 1;
		position: relative;
		margin: 0;
		background-color: #F8F8F8;
	}

	.gui-footer-buttons-ab {
		position: absolute;
		z-index: 101;
		left: 325rpx;
		top: 0rpx;
		width: 110rpx;
		height: 150rpx;
	}

	.gui-footer-buttons-ab-icon {
		width: 110rpx;
		height: 110rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 68rpx;
		background-color: #F7F8FA;
		border-radius: 100rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */

	.demo-icon {
		width: 60rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}

	.small-text {
		font-size: 22rpx;
	}

	.title1-margin {
		margin: 0 20rpx;
	}

	.button {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 8rpx;
		margin: 10rpx;
	}

	.button-text {
		font-size: 38rpx;
		text-align: center;
	}

	.demo {
		width: 210rpx;
		margin: 10rpx;
	}
</style>